<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script type="module">
    import { sjprint } from "./js/base.js"
    // 加载script
    function loadScript(src, callback) {
      let script = document.createElement("script");
      script.src = src;
      script.type = "module";
      script.onload = () => callback(null, script);
      script.onerror = () => callback(new Error("加载 " + src + " 错误"), script);
      document.head.append(script);
    }

    // 使用Promise解决回调地狱问题
    
    // 回调地狱代码
    //  // 第一次调用
    // loadScript("./js/main.js", (error1, script1) => {
    //   if (error1) {
    //     console.log(error1.message);
    //   } else {
    //     let tip1 = "这是一段内容";
    //     let text1 = document.createTextNode(tip1);
    //     document.body.appendChild(text1);
    //     sjprint("这个是回调中调用 " + script1.src + " 中的方法");
    //     // 第二次调用
    //     loadScript("./js/main.js", (error2, script2) => {
    //       if (error2) {
    //         console.log(error2.message);
    //       } else {
    //         let tip2 = "这是一段内容";
    //         let text2 = document.createTextNode(tip2);
    //         document.body.appendChild(text2);
    //         sjprint("这个是回调中调用 " + script2.src + " 中的方法");
    //           // 第三次调用
    //         loadScript("./js/main.js", (error3, script3) => {
    //           if (error3) {
    //             console.log(error3.message);
    //           } else {
    //             let tip3 = "这是一段内容";
    //             let text3 = document.createTextNode(tip3);
    //             document.body.appendChild(text3);
    //             sjprint("这个是回调中调用 " + script3.src + " 中的方法");
    //           }
    //         })
    //       }
    //     })
    //   }
    // })

    // 第一次异步操作
    new Promise((resolve, reject) => {
      // 异步操作1
    }).then((result) => {
      // 第一次 resolve 回调
      // 第二次异步操作
      return new Promise((resolve, reject) => {

      })
    }).then((result) => {
      // 第二次 resolve 回调
      // 第二次异步操作
      return new Promise((resolve, reject) => {

      })
    }).then((result) => {
      // 第三次 resolve 回调
    }).catch((error) => {
      // reject 回调
    })

    new Promise((resolve, reject) => {
      loadScript("./js/main.js", (error, script) => {
        if (error) {
          reject(error);
        } else {
          resolve(script);
        }
      })
    }).then((result) => {
      console.log(result);
      return new Promise((resolve, reject) => {
        loadScript("./js/main.js", (error, script) => {
          if (error) {
            console.log(error.message);
          } else {
            resolve(script);
          }
        });
      });
    }).then((result) => {
      console.log(result);
      return new Promise((resolve, reject) => {
        loadScript("./js/main.js", (error, script) => {
          if (error) {
            console.log(error.message);
          } else {
            resolve(script);
          }
        });
      });
    }).then((result) => {
      console.log(result);
    });

    // Promise.all可以将多个Promise实例包装成一个新的Promise实例。
    // 同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，
    // 而失败的时候则返回最先被reject失败状态的值。
    // Promise.all
    Promise.all([
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({name: "jaesun", height:188})
        }, 1000);
      }),
      new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({ name: "dan", height: 168 })
        }, 2000);
      }),
    ]).then((result) => {
      // result 结果数组
      console.log(result);
    })

    // Promse.race就是赛跑的意思，
    // 多个Promise对象里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。
    // Promise.race
    let p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
            
          resolve('success')
        }, 1000)
      })

      let p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('failed')
        }, 500)
      })

      Promise.race([p1, p2]).then((result) => {
        console.log(result)
      }).catch((error) => {
        console.log(error)  // 打开的是 'failed'
      })

  </script>
</body>

</html>